<template>
  <div class="container mx-auto px-4 py-12">
    <div v-if="loading" class="flex justify-center items-center min-h-[400px]">
      <div class="loading-spinner"></div>
    </div>
    
    <template v-else>
      <h1 class="text-4xl font-bold mb-8">{{ solution?.title || 'LLM应用平台' }}</h1>
      
      <!-- 平台介绍 -->
      <section class="mb-12">
        <h2 class="text-2xl font-semibold mb-4">平台介绍</h2>
        <div class="text-gray-600 leading-relaxed" v-html="solution?.description || defaultDescription"></div>
      </section>

      <!-- 核心功能 -->
      <section class="mb-12">
        <h2 class="text-2xl font-semibold mb-4">核心功能</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div v-for="(feature, index) in features" :key="index" class="p-6 bg-white rounded-lg shadow-md">
            <h3 class="text-xl font-medium mb-3">{{ feature.title }}</h3>
            <p class="text-gray-600">{{ feature.description }}</p>
          </div>
        </div>
      </section>

      <!-- 应用场景 -->
      <section class="mb-12">
        <h2 class="text-2xl font-semibold mb-4">应用场景</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div v-for="(scene, index) in scenes" :key="index" class="p-6 bg-white rounded-lg shadow-md">
            <h3 class="text-xl font-medium mb-3">{{ scene.title }}</h3>
            <p class="text-gray-600">{{ scene.description }}</p>
          </div>
        </div>
      </section>

      <!-- 联系我们 -->
      <section>
        <h2 class="text-2xl font-semibold mb-4">了解更多</h2>
        <p class="text-gray-600 mb-4">
          如果您想了解更多关于我们LLM应用平台的信息，请联系我们的技术团队。
        </p>
        <router-link 
          to="/contact" 
          class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
        >
          联系我们
        </router-link>
      </section>
    </template>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getLlmSolution } from '@/api/solutions'

const loading = ref(true)
const solution = ref(null)

const defaultDescription = `
  我们的LLM（大型语言模型）应用平台提供了一站式的AI解决方案，帮助企业快速构建和部署基于大语言模型的智能应用。
  通过整合最新的AI技术，我们为客户提供定制化的语言模型服务，满足不同场景下的智能化需求。
`

const features = [
  {
    title: '模型训练与微调',
    description: '支持企业级定制化模型训练，快速适配专业领域知识'
  },
  {
    title: 'API服务集成',
    description: '提供标准化的API接口，便捷接入已有业务系统'
  },
  {
    title: '智能应用开发',
    description: '快速构建对话机器人、智能客服等AI应用'
  }
]

const scenes = [
  {
    title: '智能客服',
    description: '24/7全天候在线客服支持，智能理解客户需求'
  },
  {
    title: '知识库管理',
    description: '智能文档处理与知识提取，提升信息检索效率'
  }
]

// 获取LLM解决方案数据
const fetchSolutionData = async () => {
  try {
    const res = await getLlmSolution()
    if (res.data) {
      solution.value = res.data
    }
  } catch (error) {
    console.error('获取LLM解决方案数据失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchSolutionData()
})
</script>

<style scoped>
.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> 